import Card from "antd/es/card/Card";
import { Button, Checkbox, Form, Input, Select, Space, Spin, InputNumber, Table, DatePicker, Radio } from 'antd';
import React, { useContext, useEffect, useRef, useState } from 'react';
import _ from 'lodash';
import { useParams, useHistory } from 'react-router-dom';
import JcdHandle from "../../../../../../utils/apis/JcdHandle";
import FetchHelper from "../../../../../../utils/helper/fetch-helper";
import JcyjApi from "../../../../../../utils/apis/JcyjApi";
import MapPoint from '../../../../../framework/MapPoint';
import managerContext from '../../../Entry/managerContext';


export default function JcdEdit(props) {
  const dynamicForms = [
    {
      "alias": "站点名称",
      "name": "zdmc",
      "type": "input"
    },
    {
      "alias": "站点编号",
      "name": "zdid",
      "type": "input"
    },
    {
      "alias": "行政区划名称",
      "name": "xzqhmc",
      "type": "select"
    },
    {
      "alias": "行政区划编码",
      "name": "xzqhbm",
      "type": "select"
    },
    {
      "alias": "预警类别显示",
      "name": "yhlb",
      "type": "select"
    },
    {
      "alias": "事件类型显示",
      "name": "jstype",
      "type": "rddio_sj"
    },
    {
      "alias": "事件等级",
      "name": "jbys",
      "type": "rddio"
    },
    {
      "alias": "预警标题",
      "name": "yjbt",
      "type": "input"
    },
    {
      "alias": "预警详细内容",
      "name": "yjxxnr",
      "type": "input"
    },

    {
      "alias": "地理信息",
      "name": "geom",
      "type": "map"
    },
    // {
    //   "alias": "详情备注（json）",
    //   "name": "xq",
    //   "type": "input"
    // },

  ]



  const [form] = Form.useForm();
  const { longitudeAndLatitude } = useContext(managerContext);
  useEffect(() => {
    if (longitudeAndLatitude) {
      form.setFieldsValue({ jd: longitudeAndLatitude[0], wd: longitudeAndLatitude[1], })
    }
  }, [longitudeAndLatitude, form])
  useEffect(() => {

  }, [])
  const handleJWClick = () => {

  }
  const history = useHistory();
  const quxiaoHandle = () => {
    history.push(`/manager/yjxxgl`)
  }
  const [diZhenSelect, setDiZhenSelect] = useState()
  const [currentTime, setCurrentTime] = useState(false);
  const [diZhendj, setDiZhendj] = useState();
  //地震等级变化
  useEffect(() => {
    console.log("1", diZhendj);
    if(diZhendj>=7){
      form.setFieldsValue({jbys:'1'})
    }
    if(diZhendj<=6.9&&diZhendj>=6.0){
      form.setFieldsValue({jbys:'2'})
    }
    if(diZhendj<=5.9&&diZhendj>=5.0){
      form.setFieldsValue({jbys:'3'})
    }
    if(diZhendj<=4.9&&diZhendj>=4.0){
      form.setFieldsValue({jbys:'4'})
    }
  },[diZhendj,form])
  useEffect(() => {
    const date = new Date(); // 创建一个包含指定日期和时间的 Date 对象
    // 获取年、月、日、时、分、秒
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且补0
    const day = String(date.getDate()).padStart(2, '0'); // 补0
    const hours = String(date.getHours()).padStart(2, '0'); // 补0
    const minutes = String(date.getMinutes()).padStart(2, '0'); // 补0
    const seconds = String(date.getSeconds()).padStart(2, '0'); // 补0

    // 格式化为 "YYYY-MM-DD HH:MM:SS" 的字符串
    const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    form.setFieldsValue({ sj: formattedDateTime })
  }, [currentTime, form])

  const handleClick = () => {
    setCurrentTime(!currentTime)
  }

  const xzquSelect=(e)=>{
    console.log(e);
    let xzqhbm
    switch(e){
      case '翠屏区':xzqhbm=511502;break;
      case '南溪区':xzqhbm=511503;break;
      case '叙州区':xzqhbm=511504;break;
      case '江安县':xzqhbm=511523;break;
      case '长宁县':xzqhbm=511524;break;
      case '高县':xzqhbm=511525;break;
      case '珙县':xzqhbm=511526;break;
      case '筠连县':xzqhbm=511527;break;
      case '兴文县':xzqhbm=511528;break;
      case '屏山县':xzqhbm=511529;break;
      case '两海新区':xzqhbm=511524;break;
      case '三江新区':xzqhbm=511502;break;
      default:break;
    }
    form.setFieldsValue({ xzqhbm: xzqhbm })
  }

  const onFinish = (values) => {
    console.log(values);
    values.isfb = "0";
    var jsonString = JSON.stringify(values);
    values.xq=jsonString
    console.log('values',values);
    FetchHelper.putJson(`/admin-api/ybyj/yjsjb`, values).then(resp => { alert("修改成功");history.push(`/manager/yjxxgl`) }).catch(err => { alert("修改失败") })
  }




  return <div className='layout-h h100' style={{
    overflow: "scroll"
  }}>
    <Card className='h100 fill' style={{
      height: "1500px"
    }}>
      <Form method="post"
        onFinish={onFinish}
        form={form}>
        <header style={{
          fontSize: 20,
          fontWeight: "bold"
        }}>预警数据信息</header>
        <hr />

        <div className="InputForm" style={{
          display: "flex",
          flexWrap: "wrap"
        }}>
          {dynamicForms !== undefined && dynamicForms.map((formItem) => {
            let node;
            switch (formItem.type) {
              case 'select':
                if (formItem.alias === "行政区划名称") {
                  node = <Select onSelect={xzquSelect}>
                    <Select.Option value="翠屏区">翠屏区</Select.Option>
                    <Select.Option value="南溪区">南溪区</Select.Option>
                    <Select.Option value="叙州区">叙州区</Select.Option>
                    <Select.Option value="江安县">江安县</Select.Option>
                    <Select.Option value="长宁县">长宁县</Select.Option>
                    <Select.Option value="高县">高县</Select.Option>
                    <Select.Option value="珙县">珙县</Select.Option>
                    <Select.Option value="筠连县">筠连县</Select.Option>
                    <Select.Option value="兴文县">兴文县</Select.Option>
                    <Select.Option value="屏山县">屏山县</Select.Option>
                    <Select.Option value="两海新区">两海新区</Select.Option>
                    <Select.Option value="三江新区">三江新区</Select.Option>
                  </Select>;
                } else if (formItem.alias === "行政区划编码") {
                  node = <Select>
                    <Select.Option value="511502">511502</Select.Option>
                    <Select.Option value="511503">511503</Select.Option>
                    <Select.Option value="511504">511504</Select.Option>
                    <Select.Option value="511523">511523</Select.Option>
                    <Select.Option value="511524">511524</Select.Option>
                    <Select.Option value="511525">511525</Select.Option>
                    <Select.Option value="511526">511526</Select.Option>
                    <Select.Option value="511527">511527</Select.Option>
                    <Select.Option value="511528">511528</Select.Option>
                    <Select.Option value="511529">511529</Select.Option>
                    {/* <Select.Option value="511503">翠屏区</Select.Option>
                    <Select.Option value="511504">南溪区</Select.Option>
                    <Select.Option value="511505">叙州区</Select.Option>
                    <Select.Option value="511523">江安县</Select.Option>
                    <Select.Option value="511524">长宁县</Select.Option>
                    <Select.Option value="511525">高县</Select.Option>
                    <Select.Option value="511526">珙县</Select.Option>
                    <Select.Option value="511527">筠连县</Select.Option>
                    <Select.Option value="511528">兴文县</Select.Option> */}
                  </Select>;
                } else {
                  node = <>
                    <Space style={{ display: 'flex', width: "100%" }}>
                      <Space.Compact>
                        <Select onSelect={(a) => {setDiZhenSelect(a);form.setFieldsValue({ yhlb: a }) }} style={{
                          width: "200px"
                        }} >
                          <Select.Option value="地灾">地灾</Select.Option>
                          <Select.Option value="洪涝">洪涝</Select.Option>
                          <Select.Option value="火灾">火灾</Select.Option>
                          <Select.Option value="地震" >地震</Select.Option>
                        </Select>
                        {diZhenSelect === '地震' && <Form.Item label='震级' name="" style={{
                          width: "100%", marginLeft: "10px"
                        }}>
                          <InputNumber step={0.1} onChange={(a) => {setDiZhendj(a)}} />
                        </Form.Item>}
                      </Space.Compact>
                    </Space>
                  </>;
                }
                break;
              case 'rddio':
                node = <Radio.Group >
                  <Radio value="1"> 特别重大事件 </Radio>
                  <Radio value="2"> 重大事件 </Radio>
                  <Radio value="3"> 较大事件 </Radio>
                  <Radio value="4"> 一般事件 </Radio>
                </Radio.Group>;
                break;

              case 'rddio_sj':
                node = <Radio.Group>
                  <Radio value="1"> 一般事件 </Radio>
                  <Radio value="2"> 应急事件 </Radio>
                </Radio.Group>;
                break;
              case 'map':
                node = <MapPoint></MapPoint>;
                break;
              case 'input':
              default:
                node = <Input style={{
                  width: "90%"
                }}
                  onChange={(e) => {

                  }}

                />
            }
            return <div style={{
              flexBasis: "33%",
              marginBottom: "10px"
            }}><Form.Item
              label={formItem.alias}
              name={formItem.name}

              rules={[
                {
                  required: true,

                }
              ]}


            >
                {node}
              </Form.Item></div>

          })}

          <Space size="small">
            <Space.Compact
              style={{
                width: '100%',
              }}
            >
              <Form.Item label='时间' name='sj' style={{marginLeft:10}}>
                <Input readOnly />
              </Form.Item>
              <Button type="primary" onClick={handleClick}>获取当前时间</Button>
            </Space.Compact>
          </Space>

          <Form.Item label='经度' name='jd' style={{marginLeft:10}}>
            <Input readOnly />
          </Form.Item>
          <Form.Item label='纬度' name='wd' style={{marginLeft:10}}>
            <Input readOnly />
          </Form.Item>
          <Form.Item label='死亡人数' name='swrs' style={{marginLeft:10,width:170}}>
            <Input  />
          </Form.Item>
          <Form.Item label='失踪人数' name='szrs' style={{marginLeft:10,width:170}}>
            <Input  />
          </Form.Item>
          <Form.Item label='受伤人数' name='ssrs' style={{marginLeft:10,width:170}}>
            <Input  />
          </Form.Item>
        </div>




        <div className="layout-h">
          <Button className="btn1" type="primary"
            htmlType="submit"

          //onClick={baocunHandle}
          >新增</Button>

          <Button onClick={quxiaoHandle} className="btn2">返回</Button>
        </div>
      </Form>
    </Card>
  </div>
}